<template>
    <div class="wrapper">
        <h1>Count</h1>
        <h2>当前求和为：{{ sum }}</h2>
        <h3>hello：{{ name }}</h3>
        <h3>bigSum：{{ bigSum }}</h3>
        <!-- v-model.number 转数字 -->
        <select v-model.number="n">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="sub">减</button>
    </div>
</template>

<script lang="ts" setup name="Count">

import { ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useCountStore } from '@/store/count'

const countStore = useCountStore()
const { sum, name, bigSum } = storeToRefs(countStore)

let n = ref(1)

function add() {
    // 第一种修改方式(触发多次修改)
    // countStore.sum += n.value
    // countStore.name += '~'

    // 第二种方式(触发一次修改)
    // countStore.$patch({
    //     sum: countStore.sum + n.value,
    //     name: countStore.name + '~',
    // })

    // 第三种方式(action)
    countStore.increment(n.value)
}
function sub() {
    countStore.sum -= n.value
}

</script>


<style scoped>
.wrapper {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
    margin: 20px
}

select,
button {
    height: 30px;
    margin: 0 5px;
}
</style>